<!-- <script setup>

</script>

<template>
controller
</template>

<style scoped>

</style> -->
<template>
    <div class="dashboard-container">
      <!-- 顶部欢迎栏 -->
      <el-card class="welcome-card">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold">上午好，管理员 👋</h1>
            <p class="text-gray-500 mt-2">今日晴，15℃ - 25℃，祝你工作愉快！</p>
          </div>
          <el-statistic 
            title="当前时间" 
            :value="currentTime" 
            :format="timeFormat"
            class="time-statistic"
          />
        </div>
      </el-card>
  
      <!-- 核心指标卡片 -->
      <el-row :gutter="20" class="mt-4">
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <metric-card 
            title="总用户数" 
            :value="totalUsers" 
            icon="el-icon-user" 
            color="#409EFF"
            trend="+12% 周同比"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <metric-card 
            title="今日访问量" 
            :value="dailyVisits" 
            icon="el-icon-data-line" 
            color="#67C23A"
            trend="-3% 昨日对比"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <metric-card 
            title="系统健康度" 
            :value="healthStatus" 
            icon="el-icon-cpu" 
            color="#E6A23C"
            suffix="%"
            trend="99.9% 正常运行"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <metric-card 
            title="待办事项" 
            :value="pendingTasks" 
            icon="el-icon-notebook-2" 
            color="#F56C6C"
            trend="3项未完成"
          />
        </el-col>
      </el-row>
  
      <!-- 主要内容区域 -->
      <el-row :gutter="20">
        <!-- 左列 -->
        <el-col :xs="24" :md="16" class="mb-4">
          <el-card class="chart-card">
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><data-line /></el-icon>
                <span>访问趋势分析</span>
              </div>
            </template>
            <div ref="chartRef" style="height: 300px;"></div>
          </el-card>
        </el-col>
  
        <!-- 右列 -->
        <el-col :xs="24" :md="8" class="mb-4">
          <el-card class="quick-actions">
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><magic-stick /></el-icon>
                <span>快捷操作</span>
              </div>
            </template>
            <div class="grid grid-cols-2 gap-4">
              <el-button type="primary" class="action-btn">
                <el-icon><plus /></el-icon>新建内容
              </el-button>
              <el-button type="success" class="action-btn">
                <el-icon><upload /></el-icon>数据导入
              </el-button>
              <el-button type="warning" class="action-btn">
                <el-icon><download /></el-icon>报表导出
              </el-button>
              <el-button type="info" class="action-btn">
                <el-icon><setting /></el-icon>系统设置
              </el-button>
            </div>
          </el-card>
  
          <el-card class="mt-4 recent-activities">
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><clock /></el-icon>
                <span>最近动态</span>
              </div>
            </template>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in activities"
                :key="index"
                :timestamp="item.time"
                :color="item.type === 'success' ? '#67C23A' : '#F56C6C'"
              >
                <el-tag :type="item.type" size="small">{{ item.tag }}</el-tag>
                {{ item.content }}
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import * as echarts from 'echarts'
  import { 
    DataLine, MagicStick, Plus, Upload, Download, Setting, Clock 
  } from '@element-plus/icons-vue'
    
  // 指标卡片组件
  const MetricCard = {
  props: {
    title: String,
    value: [Number, String],
    icon: String,
    color: {
      type: String,
      default: '#409EFF'
    },
    suffix: String,
    trend: String
  },
  computed: {
    borderStyle() {
      return { borderLeft: `4px solid ${this.color}` }
    }
  },
  template: `
    <el-card 
      class="metric-card" 
      :style="borderStyle"
    >
      <div class="flex items-center justify-between">
          <div>
            <div class="text-gray-500 mb-2">{{ title }}</div>
            <div class="text-2xl font-bold">
              {{ value }}<span class="text-sm">{{ suffix }}</span>
            </div>
            <div class="text-xs mt-1" :style="{ color }">{{ trend }}</div>
          </div>
          <el-icon :color="color" class="text-3xl">
            <component :is="icon" />
          </el-icon>
        </div>
    </el-card>
  `
}

//   const MetricCard = {
//     props: ['title', 'value', 'icon', 'color', 'suffix', 'trend'],
//     template: `
//       <el-card class="metric-card" :style="{ borderLeft:`4px solid ${color}`}">
//         <div class="flex items-center justify-between">
//           <div>
//             <div class="text-gray-500 mb-2">{{ title }}</div>
//             <div class="text-2xl font-bold">
//               {{ value }}<span class="text-sm">{{ suffix }}</span>
//             </div>
//             <div class="text-xs mt-1" :style="{ color }">{{ trend }}</div>
//           </div>
//           <el-icon :color="color" class="text-3xl">
//             <component :is="icon" />
//           </el-icon>
//         </div>
//       </el-card>
//     `
//   }
  
  // 图表配置
  const chartOption = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line',
      smooth: true,
      areaStyle: {}
    }]
  }
  
  // 数据
  const currentTime = ref(Date.now())
  const totalUsers = ref(28456)
  const dailyVisits = ref(1234)
  const healthStatus = ref(99.9)
  const pendingTasks = ref(3)
  const chartRef = ref(null)
  let chartInstance = null
  
  const activities = ref([
    { time: '2025-05-18 09:30', type: 'success', tag: '更新', content: '系统升级至v2.3.0' },
    { time: '2025-05-18 14:15', type: 'danger', tag: '告警', content: '检测到异常登录尝试' },
    { time: '2025-05-18 18:00', type: 'success', tag: '新建', content: '用户张三创建成功' }
  ])
  
  // 初始化图表
  onMounted(() => {
    chartInstance = echarts.init(chartRef.value)
    chartInstance.setOption(chartOption)
    
    // 更新时间
    const timer = setInterval(() => {
      currentTime.value = Date.now()
    }, 1000)
    
    onBeforeUnmount(() => {
      clearInterval(timer)
      chartInstance.dispose()
    })
  })
  
  const timeFormat = () => {
    return new Date(currentTime.value).toLocaleTimeString()
  }
  </script>
  
  <style scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 60px);
  }
  
  .welcome-card {
    background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%);
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  }
  
  .metric-card {
    transition: transform 0.3s;
    cursor: pointer;
    border: none !important;
  }
  
  .metric-card:hover {
    transform: translateY(-3px);
  }
  
  .chart-card {
    height: 400px;
  }
  
  .quick-actions .action-btn {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
  }
  
  .quick-actions .action-btn i {
    font-size: 24px;
    margin-bottom: 8px;
  }
  
  .recent-activities {
    height: 300px;
    overflow-y: auto;
  }
  
  .time-statistic :deep(.el-statistic__content) {
    font-size: 24px;
    font-weight: bold;
    color: #606266;
  }
  
  @media (max-width: 768px) {
    .welcome-card .flex {
      flex-direction: column;
      text-align: center;
    }
    
    .time-statistic {
      margin-top: 16px;
    }
  }
  </style>